<div data-test-setting="icon" ...attributes>
    <GhUploader
        @extensions={{this.iconExtensions}}
        @paramsHash={{hash purpose="icon"}}
        @onComplete={{this.imageUploaded}}
        as |uploader|
    >
    <div class="gh-setting-content">
        <label class="gh-setting-title" for="publication-icon">Publication icon</label>
        <div class="gh-setting-desc">A square, social icon, at least 60x60px</div>
        {{#each uploader.errors as |error|}}
            <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
        {{/each}}
    </div>
    <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
        {{#if uploader.isUploading}}
            {{uploader.progressBar}}
        {{else if this.settings.icon}}
            <div class="gh-branding-image-container transparent-bg">
                <input
                    id="publication-icon"
                    type="image"
                    class="blog-icon"
                    src={{this.settings.icon}}
                    {{on "click" uploader.triggerFileDialog}}
                    data-test-icon-img
                >
                <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="icon">
                    {{svg-jar "trash" class="w4 h4"}}
                </button>
            </div>
        {{else}}
            <button id="publication-icon" type="button" class="gh-btn gh-btn-white self-center" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="icon">
                <span>Upload icon</span>
            </button>
        {{/if}}
        <div class="dn">
            <GhFileInput
                @multiple={{false}}
                @action={{uploader.setFiles}}
                @accept={{this.iconMimeTypes}}
                @onInsert={{uploader.registerFileInput}}
                data-test-file-input="icon"
            />
        </div>
    </div>
    </GhUploader>
</div>